<template>
    <div><div class="memberherade" >
          <router-link to="/minepage/mine"><img style="margin-left:4%;margin-top:5%;float:left" src="/src/assets/微信图片_20220829174837.png"/></router-link>
          <span style="line-height:55px">关注</span>
    </div>
        <div style="width:100%;float:left;display:flex;justify-content: space-around;border-top: 1px solid #f2f2f2;margin-top:5%;border-bottom: 1px solid #f2f2f2;">
        <div style="height:50px;line-height:50px;font-weight: bold;color:#ed816e" @click="span1(1)" class="span9">
          达人
        </div>
        <div style="height:50px;line-height:50px" @click="span1(2)" class="span9">
          医生
        </div>
        <div style="height:50px;line-height:50px" @click="span1(3)" class="span9">
          医院
        </div>
    </div>
    <div class="minibottom-1" v-for="item in arr1" :key="item" v-show="tiezi">
      <img src="/src/assets/微信图片_20220829115305.jpg"/>
      <div class="minibottom-1-2">
        <span class="span1">王小明</span>
       <p><span class="span2">做更美的自己。</span></p>
      </div>
      <button style="color:#ec7b67;background-color:#f2f2f2;border:0px;float:right;width:70px;height:30px;border-radius: 5px;font-size:12px;margin-top:13%;margin-right:2%">已关注</button>
    </div>
    <div class="minibottom-1" v-for="item in arr1" :key="item" v-show="riji">
      <img style="width:40px;height:40px" src="/src/assets/微信图片_20220902174356.png"/>
      <div class="minibottom-1-1">
            <span class="span1">李明睿</span><br/>
       <p><span class="span3">北京华瑞整形医院</span></p><br/>
       <p><img style="width:15px;height:15px;float:left;margin-top:0%;margin-left:0%;vertical-align: middle;" src="/src/assets/微信图片_20220903173003.png" v-for="item in arr2" :key="item"/><span style="font-weight: bold;color:#ffca29;font-size:12px;float:left;margin-left:2%;line-height:17px">4.9</span><span class="span2">43 项目 | 430预约</span></p>
        <p><span class="span2">擅长：开眼角手术、鼻翼缩小术、脸型矫正、微…</span></p>
      </div>
      
      <button style="color:#ec7b67;background-color:#f2f2f2;border:0px;float:right;width:70px;height:30px;border-radius: 5px;font-size:12px;margin-top:13%;margin-right:2%;position: absolute;top:1%;right:2%">已关注</button>
    </div>
    <div class="minibottom-1" v-for="item in arr1" :key="item" v-show="yiyuan">
      <img style="width:80px;height:80px" src="/src/assets/微信图片_20220903180701.jpg"/>
      <div class="minibottom-1-3">
            <span style="font-size:18px">北京华瑞整形医院</span><br/>
       
       <p><img style="width:15px;height:15px;float:left;margin-top:0%;margin-left:0%;vertical-align: middle;" src="/src/assets/微信图片_20220903173003.png" v-for="item in arr2" :key="item"/><span style="font-weight: bold;color:#ffca29;font-size:12px;float:left;margin-left:2%;line-height:17px">4.9</span></p>
        <p><span class="span2">43 项目 | 430预约</span></p>
      </div>
      
      <button style="color:#ec7b67;background-color:#f2f2f2;border:0px;float:right;width:70px;height:30px;border-radius: 5px;font-size:12px;margin-top:13%;margin-right:2%;position: absolute;top:1%;right:2%">已关注</button>
    </div>
    </div>
</template>

<script>
export default {
data() {
    return {
      tiezi:true,
      riji:false,
      yiyuan:false,
      arr1:[1,2,3,4,5,6,7,8],
      arr2:[1,2,3,4,5],
      arr:[
        {'src1':''},
        {'src1':''},
        {'src1':'/src/assets/微信图片_20220902143946.jpg'},
        {'src1':'/src/assets/微信图片_20220902144157.jpg'},
        {'src1':'/src/assets/'},
        {'src1':'/src/assets/微信图片_20220902144203.jpg'}
      ], 
    }
    
  },
  methods: {
      span1(index){
        let span=document.querySelectorAll('.span9')
        if(index==1){
            this.tiezi=true;
            this.riji=false,
            this.yiyuan=false,
            span[0].style.fontWeight="bold";
            span[0].style.color="#ed816e";
            span[1].style.fontWeight=""
            span[1].style.color=""
            span[2].style.fontWeight=""
            span[2].style.color=""
        }
        if(index==2){
            this.tiezi=false;
             this.riji=true,
             this.yiyuan=false,
            span[1].style.fontWeight="bold"
            span[1].style.color="#ed816e"
            span[0].style.fontWeight=""
            span[0].style.color=""
            span[2].style.fontWeight=""
            span[2].style.color=""
        }
         if(index==3){
            this.tiezi=false;
             this.riji=false,
             this.yiyuan=true,
            span[1].style.fontWeight=""
            span[1].style.color=""
            span[0].style.fontWeight=""
            span[0].style.color=""
            span[2].style.fontWeight="bold"
            span[2].style.color="#ed816e"
        }
     }
    }

}
</script>

<style>
    .memberherade{width: 100%;height:50px;float: left;text-align: center;position:flex;}
    .minibottom-1-1{float: left;margin-left:5%;margin-top: 10%;}
    .minibottom-1 img{width: 40px; height: 40px;margin-top: 8%;margin-left: 5%;float: left;}
    .minegoodman{width: 100%;height:50px;float: left;text-align: center;position:flex;}
 .minibottom-1{width: 100%; background-color: #ffffff;float: left; border-bottom: 1px solid #f2f2f2;}
.minibottom-1 img{width: 60px; height: 60px;margin-top: 8%;margin-left: 5%;float: left;position: relative;}
.minibottom-1-1{float: left;margin-left:5%;margin-top: 10%;width: 300px;}
.minibottom-1-2{float: left;margin-left:5%;margin-top: 10%;width: 100px;}
.minibottom-1-3{float: left;margin-left:5%;margin-top: 10%;width: 150px;}
.span1{font-size: 20px;font-size:14px; float: left;}
.span2{font-size:10px;color: #999999;float: left;line-height:17px;margin-left: 2%;}
.span3{font-size:10px;float: left;}
.minibottom-2{float: left;}
</style>